<template>
  <view class="charts-container">
    <view class="chart-block">
      <text class="chart-title">看展分布（饼图-示例）</text>
      <canvas canvas-id="pieChart" id="pieChart" class="chart-canvas-large"></canvas>
      <view class="legend">
        <view class="legend-item"><view class="dot" style="background:#d4af37"></view><text>现代/当代</text></view>
        <view class="legend-item"><view class="dot" style="background:#f4e4bc"></view><text>古典</text></view>
        <view class="legend-item"><view class="dot" style="background:#b68f2c"></view><text>印象派</text></view>
        <view class="legend-item"><view class="dot" style="background:#8b4513"></view><text>其他</text></view>
      </view>
    </view>
    <view class="chart-block">
      <text class="chart-title">月度趋势（折线-示例）</text>
      <canvas canvas-id="lineChart" id="lineChart" class="chart-canvas"></canvas>
    </view>
    <view class="chart-block">
      <text class="chart-title">城市热度（热力图-示例）</text>
      <canvas canvas-id="heatmap" id="heatmap" class="chart-canvas"></canvas>
    </view>
  </view>
</template>

<script setup>
// 简易原生 canvas 绘制示例（后续可替换为 uCharts / ECharts）
import { onMounted } from 'vue'

function drawPie(ctx, centerX, centerY, radius, data) {
  let start = -Math.PI / 2
  data.forEach((seg) => {
    const angle = 2 * Math.PI * seg.value
    ctx.beginPath()
    ctx.moveTo(centerX, centerY)
    ctx.arc(centerX, centerY, radius, start, start + angle)
    ctx.closePath()
    if (ctx.setFillStyle) ctx.setFillStyle(seg.color); else ctx.fillStyle = seg.color
    ctx.fill()

    // 标注：指示线与百分比
    const mid = start + angle / 2
    const lineOffset = 10
    const labelOffset = 22
    const lx = centerX + Math.cos(mid) * (radius + lineOffset)
    const ly = centerY + Math.sin(mid) * (radius + lineOffset)
    const tx = centerX + Math.cos(mid) * (radius + labelOffset)
    const ty = centerY + Math.sin(mid) * (radius + labelOffset)
    if (ctx.setStrokeStyle) ctx.setStrokeStyle('#8b4513'); else ctx.strokeStyle = '#8b4513'
    if (ctx.setLineWidth) ctx.setLineWidth(1); else ctx.lineWidth = 1
    ctx.beginPath(); ctx.moveTo(centerX + Math.cos(mid)*radius, centerY + Math.sin(mid)*radius); ctx.lineTo(lx, ly); ctx.lineTo(tx, ty); ctx.stroke()
    if (ctx.setFontSize) ctx.setFontSize(12)
    if (ctx.setFillStyle) ctx.setFillStyle('#5d4e37'); else ctx.fillStyle = '#5d4e37'
    const label = Math.round(seg.value * 100) + '%'
    if (ctx.setTextAlign) ctx.setTextAlign('center')
    if (ctx.setTextBaseline) ctx.setTextBaseline('middle')
    ctx.fillText(label, tx, ty)

    start += angle
  })
}

function drawLine(ctx, points, color) {
  if (ctx.setStrokeStyle) ctx.setStrokeStyle(color); else ctx.strokeStyle = color
  if (ctx.setLineWidth) ctx.setLineWidth(2); else ctx.lineWidth = 2
  ctx.beginPath()
  points.forEach((p, i) => {
    if (i === 0) ctx.moveTo(p.x, p.y)
    else ctx.lineTo(p.x, p.y)
  })
  ctx.stroke()
}

function drawAxes(ctx, width, height, xTicks, yTicks) {
  const origin = { x: 30, y: height - 20 }
  const xEnd = width - 20
  const yTop = 20
  // 轴线
  if (ctx.setStrokeStyle) ctx.setStrokeStyle('#cbb07a'); else ctx.strokeStyle = '#cbb07a'
  if (ctx.setLineWidth) ctx.setLineWidth(1); else ctx.lineWidth = 1
  ctx.beginPath(); ctx.moveTo(origin.x, origin.y); ctx.lineTo(xEnd, origin.y); ctx.moveTo(origin.x, origin.y); ctx.lineTo(origin.x, yTop); ctx.stroke()
  // 刻度与文字
  if (ctx.setFontSize) ctx.setFontSize(10)
  if (ctx.setFillStyle) ctx.setFillStyle('#7a6a55'); else ctx.fillStyle = '#7a6a55'
  const xStep = (xEnd - origin.x) / (xTicks.length - 1)
  xTicks.forEach((t, i) => {
    const x = origin.x + i * xStep
    ctx.beginPath(); ctx.moveTo(x, origin.y); ctx.lineTo(x, origin.y - 4); ctx.stroke()
    if (ctx.setTextAlign) ctx.setTextAlign('center')
    ctx.fillText(t, x, origin.y + 12)
  })
  const yStep = (origin.y - yTop) / (yTicks.length - 1)
  yTicks.forEach((t, i) => {
    const y = origin.y - i * yStep
    ctx.beginPath(); ctx.moveTo(origin.x, y); ctx.lineTo(origin.x + 4, y); ctx.stroke()
    if (ctx.setTextAlign) ctx.setTextAlign('right')
    if (ctx.setTextBaseline) ctx.setTextBaseline('middle')
    ctx.fillText(String(t), origin.x - 6, y)
  })
}

function drawHeat(ctx, w, h, cells) {
  cells.forEach(c => {
    const color = `rgba(212,175,55,${c.intensity || 0.35})`
    if (ctx.setFillStyle) ctx.setFillStyle(color); else ctx.fillStyle = color
    ctx.beginPath()
    ctx.arc(c.x, c.y, c.r, 0, Math.PI * 2)
    ctx.fill()
  })
}

onMounted(() => {
  // 饼图
  const pie = uni.createCanvasContext('pieChart')
  drawPie(pie, 170, 130, 90, [
    { value: 0.4, color: '#d4af37', name: '现代/当代' },
    { value: 0.3, color: '#f4e4bc', name: '古典' },
    { value: 0.2, color: '#b68f2c', name: '印象派' },
    { value: 0.1, color: '#8b4513', name: '其他' }
  ])
  pie.draw()

  // 折线
  const line = uni.createCanvasContext('lineChart')
  // 坐标轴与数据（示例：7个月）
  drawAxes(line, 300, 180, ['1','2','3','4','5','6','7'], ['0','5','10','15'])
  const px = (i)=> 30 + i * ((300-20-30)/(7-1))
  const py = (v)=> (180-20) - v * ((180-20-20)/15)
  const linePts = [0,3,6,5,9,12,14].map((v,i)=>({x:px(i), y:py(v)}))
  drawLine(line, linePts, '#8b4513')
  // 数据点与数值
  if (line.setFillStyle) line.setFillStyle('#d4af37'); else line.fillStyle = '#d4af37'
  linePts.forEach(p=>{ line.beginPath(); line.arc(p.x, p.y, 2.5, 0, Math.PI*2); line.fill() })
  if (line.setFontSize) line.setFontSize(10)
  if (line.setFillStyle) line.setFillStyle('#5d4e37'); else line.fillStyle = '#5d4e37'
  linePts.forEach((p,i)=>{ line.fillText(String([0,3,6,5,9,12,14][i]), p.x+6, p.y-6) })
  line.draw()

  // 热力图
  const heat = uni.createCanvasContext('heatmap')
  // 背景网格作为参考
  if (heat.setStrokeStyle) heat.setStrokeStyle('#eeeeee'); else heat.strokeStyle = '#eeeeee'
  for (let x=20; x<=280; x+=40){ heat.beginPath(); heat.moveTo(x,20); heat.lineTo(x,160); heat.stroke() }
  for (let y=20; y<=160; y+=28){ heat.beginPath(); heat.moveTo(20,y); heat.lineTo(280,y); heat.stroke() }
  drawHeat(heat, 300, 180, [
    { x: 80, y: 90, r: 50, intensity: 0.55 }, { x: 140, y: 60, r: 36, intensity: 0.45 }, { x: 210, y: 120, r: 60, intensity: 0.6 }, { x: 250, y: 70, r: 30, intensity: 0.4 }
  ])
  // 颜色提示条
  if (heat.setFillStyle) heat.setFillStyle('#d4af37'); else heat.fillStyle = '#d4af37'
  heat.fillRect(20, 165, 80, 6)
  if (heat.setFillStyle) heat.setFillStyle('#f4e4bc'); else heat.fillStyle = '#f4e4bc'
  heat.fillRect(100, 165, 80, 6)
  if (heat.setFillStyle) heat.setFillStyle('#b68f2c'); else heat.fillStyle = '#b68f2c'
  heat.fillRect(180, 165, 80, 6)
  heat.draw()
})
</script>

<style lang="scss" scoped>
.charts-container { display: flex; flex-direction: column; gap: 16px; }
.chart-block { background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(245,242,237,0.95)); border-radius: 14px; padding: 12px; box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15); }
.chart-title { color: #8b4513; font-weight: 600; font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; margin-bottom: 8px; display:block; }
.chart-canvas { width: 300px; height: 180px; }
.chart-canvas-large { width: 340px; height: 260px; }
.legend { display:flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.legend-item { display:flex; align-items:center; gap:6px; color:#7a6a55; font-size:12px; }
.legend-item .dot { width:10px; height:10px; border-radius:5px; }
</style>

